<template>
    <div class="banner">
      <div @click="showSwiper">
        <div class="banner-img">
          <img src="//img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg">
        </div>
        <div class="banner-title">故宫(AAAAA景区)</div>
      </div>
      <div class="banner-swiper" v-show="imgSwiper" @click="hideSwiper">
        <swiper :options="swiperOption" ref="swiperOption" >
          <swiper-slide v-for="item in bannerList" :key="item.id">
            <img :src="item.imgUrl">
          </swiper-slide>
        </swiper>
        <div class="swiper-pagination" slot="pagination"></div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Banner",
      data(){
          return{
            imgSwiper:false,
            swiperOption: {
              pagination: {
                el: '.swiper-pagination',
                type:"fraction"
              },
            },
            bannerList:[
              {
                id:'01',
                imgUrl:"http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_350x240_8e61302a.jpg"
              },
              {
                id:"02",
                imgUrl:"http://img1.qunarzz.com/sight/p0/1909/4e/4e1afc2e1133ade7a3.img.jpg_350x240_2646c984.jpg"
              }
            ],
          }
      },
      methods:{
          showSwiper(){
            this.imgSwiper=true;
          },
          hideSwiper(){
            this.imgSwiper=false;
          }
      }
    }
</script>

<style scoped>
  .banner{
    position: relative;
  }
  .banner-img{
    width: 100%;
    height: 0;
    padding-bottom: 55%;
    overflow: hidden;
  }
  .banner-img img{
    width: 100%;
  }
  .banner-title{
    position: absolute;
    left: .3rem;
    bottom: .3rem;
    font-size: .36rem;
    color: #fff;
  }
  .banner-swiper{
    background-color: #000;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .banner-swiper img{
    width: 100%;
  }
  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
    color: #fff;
    font-size:.32rem;
    bottom: .6rem;
  }

</style>
